<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			
			
		</div>
		
	</body>
	<script>
		// 定义一个混入对象
		var myMixin={
			created:function(){
				console.log("Mix created method...............");
				this.hello();
				this.info();
			},
			data:function(){
				return {
					name:"mix 何伟",
					sex:"mix 男",
					age:"mix 18"
				}
			},
			methods:{
				hello:function(){
					console.log("mix hello");
				},
				info:function(){
					console.log(this.$data);
				}
			}
		}
		// 定义一个使用混入对象的组件
		
		var mixComponent=Vue.extend({
			mixins:[myMixin],
			data:function(){
				return {
					name:"component 何伟",
					age:"component 18"
				}
			},
			methods:{
				hello:function(){
					console.log("component  hello");
				},
				info:function(){
					console.log(this.$data)
				}
			},
			created:function() {
				console.log("component created method.................");
				this.hello();
				this.info();
			}
		})
		var component=new mixComponent();
		
		var app=new Vue({
			el:'#app',
			mixins:[myMixin],
			data:{
				name:"app 何伟",
				age:"app 18"
			},
			methods:{
				hello:function(){
					console.log("app hello");
				},
				info:function(){
					console.log(this.$data);
				}
			},
			created:function() {
				console.log("app created method.................");
				this.hello();
				this.info();
			}
		})
		
		// 全局混入
		// 为自定义的选项 'myOption' 注入一个处理器。
		Vue.mixin({
		  created: function () {
			var myoption = this.$options.myoption
			if (myoption) {
			  console.log(myoption)
			}
		  }
		})
		
		var app1=new Vue({
			myoption:"My Option"
		})
	</script>
</html>
